import { NavigateService } from './../../../service/navigate.service';
import { MdDialog, MdDialogRef, MdDialogConfig, MdSnackBar } from "@angular/material";
import { GrowlMessageType, MessageBoxService } from './../../../component/messageBoxService';
import { ObjectCopier } from './../../../common/objectCopier';
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

export class TableOrderService {
    static Current: TableOrderService = new TableOrderService();
    private tableOrderDialog: TableOrderDialog;
    dialogRef: MdDialogRef<TableOrderDialog>;
    config: MdDialogConfig = {
        disableClose: false,
        width: '100%',
        position: {
            top: '0',
            bottom: '0',
            left: '0',
            right: '0'
        }
    }

    Regist(tableOrderDialog: TableOrderDialog) {
        this.tableOrderDialog = tableOrderDialog;
    }

    open(dialog: MdDialog, tableInfo, totalCartLength, totalAmount) {
        this.dialogRef = dialog.open(TableOrderDialog, this.config);
        this.tableOrderDialog.tableInfo = <any>ObjectCopier.Copy(tableInfo);
        this.tableOrderDialog.totalAmount = totalAmount;
        this.tableOrderDialog.description = null;
        this.tableOrderDialog.totalCartLength = totalCartLength;
        this.tableOrderDialog.firstClick = true;
        return new Promise((resolve, reject) => {
            this.dialogRef.afterClosed().subscribe((tableInfo) => {
                this.dialogRef = null;
                resolve(tableInfo);
            });
        });
    }
}

@Component({
    //moduleId: module.id,
    selector: 'div[tableDetail-order]',
    template: `
        <md-dialog-content fxLayout="column" class="tabledetail-content">
            <header class="app-header noshrink">
                <span id="dialog-back-btn" class="i-arrow-back margin-l header-icon" (click)="cancel()"></span>
                <span fxFlex="100%" class="margin-l-xs">台桌订单</span>
            </header>
            <div tabindex="0" autofocus fxLayout="column" fxFlex="100%">
                <div fxLayout="column" fxFlex="100%" class="tabledetail-info">
                    <div class="color-lightgray tabledetail-opentime" fxLayout="row">
                        <span>开台时间：</span>
                        <span *ngIf="tableInfo.tableParty">{{tableInfo.tableParty.openedTime| date:'yyyy-MM-dd HH:mm'}}</span>
                    </div>
                    <div fxLayout="row" fxLayoutAlign="start center" class="noshrink tabledetail-person v-gap">
                        <span class="noshrink">顾客人数：</span>
                        <span fxFlex="100%">
                            {{(tableInfo.masterOrder && tableInfo.masterOrder.extended && tableInfo.masterOrder.extended.headCount) ? tableInfo.masterOrder.extended.headCount : 0}}
                        </span>
                        <span class="i-clear noshrink" (click)="onClearPeople()"></span>
                    </div>
                    <div fxLayout="column" fxLayoutAlign="center start" class="tabledetail-order-panel noshrink v-gap">
                        <div fxLayout="row" fxLayoutAlign="space-between" class="pct100">
                            <div fxLayout="row" fxLayoutAlign="center center" class="tabledetail-order-numbtn" *ngFor="let numA of numsPre" (click)="onInputPeople(numA)">
                                {{numA}}
                            </div>
                        </div>
                        <div fxLayout="row" fxLayoutAlign="space-between" class="pct100">
                            <div fxLayout="row" fxLayoutAlign="center center" class="tabledetail-order-numbtn" *ngFor="let numB of numsNext" (click)="onInputPeople(numB)">
                                {{numB}}
                            </div>
                        </div>
                    </div>
                    <div class="tabledetail-order-remark v-gap">
                        <textarea placeholder="请输入备注信息" [(ngModel)]="description"></textarea>
                    </div>
                </div>
                <div fxLayout="column" class="noshrink">
                    <div fxLayout="row" fxLayoutAlign="start center" class="tabledetail-count">
                        <span class="margin-l-s" fxFlex="100%">合计{{totalCartLength ? totalCartLength : 0}}项</span>
                        <span class="color-primary noshrink margin-r-s">{{(totalAmount ? totalAmount : 0) | number:'1.2-2' | currencySymbol}}</span>
                    </div>
                    <button md-button class="bgcolor-gray color-white pct100 text-m normal-btn" (click)="closeAccount()">结算</button>
                </div>
            </div>
        </md-dialog-content>
    `,
    styleUrls: ['../tableDetail.component.scss'],
})
export class TableOrderDialog implements OnInit {

    constructor(
        private msgSvr: MessageBoxService,
        private dialog: MdDialog,
        public dialogRef: MdDialogRef<TableOrderDialog>,
        public snackBar: MdSnackBar,
        private navSvr: NavigateService
    ) {
        TableOrderService.Current.Regist(this);
    }
    tableInfo = <any>{
        masterOrder: null
    }
    isShowSelectPerple = false;
    numsPre = [1, 2, 3, 4, 5];
    numsNext = [6, 7, 8, 9, 0];
    totalAmount = "";
    description: string;
    totalCartLength: number;
    snackBarRef = null;
    firstClick = true;

    ngOnInit() {
        this.navSvr.registGoBack(() => {
            let backBtn = document.getElementById("dialog-back-btn");
            if (backBtn) {
                backBtn.click();
            }
        });
    }
    /**
     * 输入人数
     * @param  {} num  数字，表示人数
     */
    onInputPeople(num) {
        if (this.firstClick) {
            this.tableInfo.masterOrder.extended.headCount = "";
            this.firstClick = false;
        }
        if (!this.tableInfo.masterOrder.extended.headCount || this.tableInfo.masterOrder.extended.headCount == "0") {
            this.tableInfo.masterOrder.extended.headCount = "";
        }
        let result = this.tableInfo.masterOrder.extended.headCount + "" + num;
        if (!Number(result) || Number(result) > 10000) {
            if (!this.snackBarRef) {
                this.snackBarRef = this.msgSvr.Growl(GrowlMessageType.Error, this.snackBar, "请填写正确的人数【1-10000】");
                this.snackBarRef.afterDismissed().subscribe(() => {
                    this.snackBarRef = null;
                });
            }
            return;
        }
        this.tableInfo.masterOrder.extended.headCount = this.tableInfo.masterOrder.extended.headCount + "" + num;
    }
    /**
     * 展示或者隐藏数字输入板
     */
    onTogglePerpleNum() {
        this.isShowSelectPerple = !this.isShowSelectPerple;
    }
    /**
     * 清空人数
     */
    onClearPeople() {
        this.tableInfo.masterOrder.extended.headCount = 0;
    }

    // async onOpenRemark() {
    //     let remark = await RemarkService.Current.open(this.dialog);
    //     if (remark) {
    //         this.description = <any>remark;
    //     }
    // }

    /**
     * 确认当前修改的台桌订单信息的回调函数
     */
    ok() {
        let head = this.tableInfo.masterOrder.extended.headCount;
        if (!Number(head) || head <= 0 || head > 10000) {
            if (!this.snackBarRef) {
                this.snackBarRef = this.msgSvr.Growl(GrowlMessageType.Error, this.snackBar, "请填写正确的人数【1-10000】");
                this.snackBarRef.afterDismissed().subscribe(() => {
                    this.snackBarRef = null;
                });
            }
            return;
        }
        this.dialogRef.close(this.tableInfo);
    }
    /**
     * 取消本次对台桌订单的操作
     */
    cancel() {
        // this.dialogRef.close(null);
        let head = this.tableInfo.masterOrder.extended.headCount;
        if (!Number(head) || head <= 0 || head > 10000) {
            if (!this.snackBarRef) {
                this.snackBarRef = this.msgSvr.Growl(GrowlMessageType.Error, this.snackBar, "请填写正确的人数【1-10000】");
                this.snackBarRef.afterDismissed().subscribe(() => {
                    this.snackBarRef = null;
                });
            }
            return;
        }
        this.dialogRef.close(this.tableInfo);
    }

    closeAccount() {
        // if (!this.snackBarRef) {
        //     this.snackBarRef = this.msgSvr.Growl(GrowlMessageType.Error, this.snackBar, "结算功能开发中...");
        //     this.snackBarRef.afterDismissed().subscribe(() => {
        //         this.snackBarRef = null;
        //     });
        // }
    }
}